<template>
    <div>
       <!--体尺测定-查询 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="羊只耳号">
       <el-select v-model="form.Earbugles" style="width: 220px" clearable>
          <el-option label="全部" :value="0"></el-option>
            <el-option
              v-for="item in ear"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
      </el-form-item>
    <el-form-item label="品&nbsp;&nbsp;&nbsp;&nbsp;种">
        <el-select v-model="form.Breed" clearable>
          <el-option label="全部" :value="0"></el-option>
          <el-option
            v-for="item in BreedList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="性&nbsp;&nbsp;&nbsp;&nbsp;别">
        <el-select v-model="form.Sex" clearable>
          <el-option label="全部" :value="0"></el-option>
          <el-option
            v-for="item in SexList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="GetBodyMeasure">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <el-button type="danger" @click="dialogFormVisible = true">新增</el-button>
    <el-button type="danger" @click="BatchDel()">删除</el-button>
    <br />
    <br />
    <!--体尺测定-列表 -->
    <el-table :data="BodyMeasureList" stripe style="width: 100%" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="序号" :fixed="true" width="110px">
        <template v-slot="a">
          <span>{{ a.$index + (page.pageIndex - 1) * page.pageSize + 1 }}</span>
        </template>
      </el-table-column>
       <el-table-column prop="Earbugles" label="耳号" :fixed="true" width="110px" />
         <el-table-column prop="Breed" label="品种" width="110px">
        <template v-slot="data">
          <span v-if="data.row.Breed == 1">杜泊</span>
          <span v-else-if="data.row.Breed == 2">澳洲白 </span>
          <span v-else-if="data.row.Breed == 3">萨福克</span>
          <span v-else-if="data.row.Breed == 4">杜湖</span>
          <span v-else-if="data.row.Breed == 5">杜杜湖</span>
          <span v-else-if="data.row.Breed == 6">萨杜湖</span>
          <span v-else-if="data.row.Breed == 7">澳湖</span>
          <span v-else-if="data.row.Breed == 8">湖羊</span>
          <span v-else>澳杜湖</span>
        </template>
      </el-table-column>
        <el-table-column prop="Sex" label="性别" width="110px">
          <template v-slot="data">
            <span v-if="data.row.Sex == 1">公</span>
            <span v-else>母</span>
          </template>
        </el-table-column>
        <el-table-column prop="MeasureCottage" label="测定栋舍" width="110px" />
        <el-table-column prop="MeasureField" label="测定栏位" width="110px" />
        <el-table-column prop="MeasureDate" label="测定日期" width="110px">
          <template v-slot="scope">
            <span>{{
              scope.row.MeasureDate
                ? scope.row.MeasureDate.replace("T", " ").substring(0, 10)
                : null
            }}</span>
          </template>
        </el-table-column>  
        <el-table-column prop="AgeDay" label="测定日龄" width="110px"/>
        <el-table-column prop="Height" label="身高(cm)" width="110px"/>
        <el-table-column prop="BodyLength" label="体长(cm)" width="110px"/>
        <el-table-column prop="Bust" label="胸围(cm)" width="110px"/>
        <el-table-column prop="TubeGirth" label="管围(cm)" width="110px"/>
        <el-table-column prop="Scrotum" label="阴囊围(cm)" width="110px"/>
        <el-table-column prop="Earbugles" label="背膘厚度(cm)" width="110px"/>
        <el-table-column prop="EyeArea" label="眼肌面积(cm2)" width="110px"/>
        <el-table-column prop="EyeWidth" label="眼肌宽度(cm)" width="110px"/>
        <el-table-column prop="CreateBy" label="创建人" width="110px"/>
        <el-table-column prop="CreateDate" label="创建时间" width="110px">
          <template v-slot="scope">
            <span>{{
              scope.row.CreateDate
                ? scope.row.CreateDate.replace("T", " ").substring(0, 10)
                : null
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="UpdateBy" label="修改人" width="110px"/>
        <el-table-column prop="UpdateDate" label="修改时间" width="110px">
          <template v-slot="scope">
            <span>{{
              scope.row.UpdateDate
                ? scope.row.UpdateDate.replace("T", " ").substring(0, 10)
                : null
            }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="110px">
          <template v-slot="scope">
            <el-link type="primary" @click="Del(scope.row.BMID)">删除</el-link>
            &nbsp;
            <el-link type="primary" @click="dialogFormVisible1 = true,EditBodyMeasure(scope.row.BMID)" >修改</el-link>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="page.pageIndex"
        v-model:page-size="page.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增弹出层 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="基本信息"
      width="60%"
      align-center
    >
      <el-form
        :model="Isform"
        ref="Isruleform"
        style="width: 100%"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
       <el-form-item :label-width="formLabelWidth">
        <el-button type="danger" @click="AddBodyMeasure(Isruleform)">新增</el-button> 
         <el-button type="danger" disabled >保存</el-button> 
         <el-button type="danger" disabled>撤销</el-button> 
         <el-button type="danger" disabled>删除</el-button> 
        </el-form-item>        
      <el-row :gutter="24">
        <el-col :span="12">
        <el-form-item
          label="测定日期:"
          prop="MeasureDate"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="Isform.MeasureDate"
            type="date"
            style="width: 60%"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
      <el-form-item
          label="身高(cm)"
          prop="Height"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.Height" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="胸围(cm)"
          prop="Bust"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.Bust" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="阴囊围(cm)"
          prop="Scrotum"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.Scrotum" style="width: 60%" clearable />
        </el-form-item>
        <el-form-item
          label="眼肌面积(cm2)"
          prop="EyeArea"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.EyeArea" style="width: 60%" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item
          label="羊只耳号"
          prop="Earbugles"
          :label-width="formLabelWidth"
        >
        <el-select v-model="Isform.Earbugles" style="width: 60%" @change="EditEar" clearable>
            <el-option
              v-for="item in ear"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="体长(cm)"
          prop="BodyLength"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.BodyLength" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="管围(cm)"
          prop="TubeGirth"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.TubeGirth" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="背膘厚度(cm)"
          prop="Backfat"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.Backfat" style="width: 60%" clearable />
        </el-form-item>
        <el-form-item
          label="眼肌宽度(cm)"
          prop="EyeWidth"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform.EyeWidth" style="width: 60%" clearable />
        </el-form-item>
        </el-col>
      </el-row>
      </el-form>
     
    </el-dialog>
    <!-- 修改弹出层 -->
    <el-dialog
      v-model="dialogFormVisible1"
      title="基本信息"
      width="60%"
      align-center
    > <el-form
        :model="Isform1"
        ref="Isruleform1"
        style="max-width: 100%"
        :rules="rules1"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <el-form-item :label-width="formLabelWidth">
        <el-button type="danger" disabled>新增</el-button> 
        <el-button type="danger" @click="UpdBodyMeasure(Isruleform1)">保存</el-button> 
        <el-button type="danger" disabled>撤销</el-button> 
        <el-button type="danger" disabled>删除</el-button> 
        </el-form-item>    
      <el-row :gutter="24">
        <el-col :span="12">
        <el-form-item
          label="测定日期:"
          prop="MeasureDate"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="Isform1.MeasureDate"
            type="date"
            style="width: 60%"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="身高(cm)"
          prop="Height"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.Height" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="胸围(cm)"
          prop="Bust"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.Bust" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="阴囊围(cm)"
          prop="Scrotum"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.Scrotum" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
          label="眼肌面积(cm2)"
          prop="EyeArea"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.EyeArea" style="width: 60%" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item
          label="羊只耳号"
          prop="Earbugles"
          :label-width="formLabelWidth"
        >
        <el-select v-model="Isform1.Earbugles" style="width: 60%" @change="EditEarEdit" clearable>
            <el-option
              v-for="item in ear"
             :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
         <el-form-item
          label="体长(cm)"
          prop="BodyLength"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.BodyLength" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="管围(cm)"
          prop="TubeGirth"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.TubeGirth" style="width: 60%" clearable />
        </el-form-item>
         <el-form-item
         label="背膘厚度(cm)"
          prop="Backfat"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.Backfat" style="width: 60%" clearable />
        </el-form-item>
        <el-form-item
          label="眼肌宽度(cm)"
          prop="EyeWidth"
          :label-width="formLabelWidth"
        >
          <el-input v-model="Isform1.EyeWidth" style="width: 60%" clearable />
        </el-form-item>
           
        </el-col>
      </el-row>
      </el-form>
    </el-dialog>
    </div>
</template>
<script setup lang="ts">
import http from '@/http'
import { ref, reactive, inject, onMounted } from "vue";
import type { AxiosStatic } from "axios";
import { get } from "@vueuse/core";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import {
    Plus,
    Search,
    Delete,
    DocumentChecked,
    Back,
    Warning,
    SuccessFilled
} from '@element-plus/icons-vue'
const axios = inject("axios") as AxiosStatic; 

const refs = ref([{ BMID: "" }])
const EditEar = () => {
  http.get("MYroute/api/SheepFile/SheepFileConditionFinds?card="+Isform.Earbugles)
  .then(res=>{
    Isform.Breed = res.data.breed;
    Isform.Sex = res.data.sex;
    Isform.MeasureCottage = res.data.cottage;
    Isform.MeasureField = res.data.field;
  })
}

const EditEarEdit = () => {
  http.get("MYroute/api/SheepFile/SheepFileConditionFinds?card="+Isform1.Earbugles)
  .then(res=>{
    Isform1.Breed = res.data.breed;
    Isform1.Sex = res.data.sex;    
    Isform1.MeasureCottage = res.data.cottage;
    Isform1.MeasureField = res.data.field;
  })
}

//新增弹出层
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const formSize = ref<ComponentSize>("default");
const Isruleform = ref<FormInstance>();
interface RuleForm{
  MeasureDate: string;
  Earbugles: string;
  Height: string;
  Bust: string;
  Breed: number,
  Sex:number,
  Scrotum: string;
  EyeArea: string;
  BodyLength: string;
  TubeGirth: string;
  Backfat: string;
  EyeWidth: string;
  MeasureCottage: string,
  MeasureField:string
}
//新增form
const Isform = reactive<RuleForm>({
  MeasureDate: "",  
  Earbugles: "",
  Height: "",
  Bust: "",
  Scrotum: "",
  Breed: 0,
  Sex:0,
  EyeArea: "",
  BodyLength: "",
  TubeGirth: "",
  Backfat: "",
  EyeWidth: "",
  MeasureCottage: "",
  MeasureField:""
})

//校验
const rules = reactive<FormRules<RuleForm>>({
  MeasureDate: [
    {
      type: "date",
      required: true,
      message: "测定日期不能为空",
      trigger: "change",
    },
  ],
  Earbugles: [{ required: true, message: "羊只耳号不能为空", trigger: "change" }],
  Height:[{ required: true, message: "身高不能为空", trigger: "blur" }],
  Bust:[{ required: true, message: "胸围不能为空", trigger: "blur" }],
  Scrotum:[{ required: true, message: "阴囊围不能为空", trigger: "blur" }],
  EyeArea:[{ required: true, message: "眼肌面积不能为空", trigger: "blur" }],
  BodyLength:[{ required: true, message: "体长不能为空", trigger: "blur" }],
  TubeGirth:[{ required: true, message: "管围不能为空", trigger: "blur" }],
  Backfat:[{ required: true, message: "背膘厚度不能为空", trigger: "blur" }],
  EyeWidth:[{ required: true, message: "眼肌宽度不能为空", trigger: "blur" }],
});
//新增体尺
const AddBodyMeasure = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      http.post("first/api/Breeding/AddBodyMeasure", Isform).then((res) => {
        if (res.data > 0) {
          ElMessage({
            message: "体尺测定保存成功",
            type: "success",
          });
          dialogFormVisible.value = false;
          GetBodyMeasure();
          formEl.resetFields();
        } else {
          ElMessage({
            message: "体尺测定保存失败",
            type: "error",
          });
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

//修改新增层
const dialogFormVisible1 = ref(false);
const Isruleform1 = ref<FormInstance>();
interface RuleForm1{
  BMID:number,
  MeasureDate: string;
  Earbugles: string;
  Height: string;
  Bust: string;
  Scrotum: string;
  EyeArea: string;
  BodyLength: string;
  TubeGirth: string;
  Backfat: string;
  EyeWidth: string;
  Sex: number;
  Breed: number;
  MeasureCottage: string;
  MeasureField: string;
  AgeDay: number;
  CreateBy: string,
  CreateDate: string
}
//修改form
const Isform1 = reactive<RuleForm1>({
  BMID:0,
  MeasureDate: "",  
  Earbugles: "",
  Height: "",
  Bust: "",
  Scrotum: "",
  EyeArea: "",
  BodyLength: "",
  TubeGirth: "",
  Backfat: "",
  EyeWidth: "",
  Sex: 0,
  Breed: 0,
  MeasureCottage: "",
  MeasureField: "",
  AgeDay: 0,
  CreateBy: "",
  CreateDate: ""
})
//校验
const rules1 = reactive<FormRules<RuleForm1>>({
  MeasureDate: [
    {
      type: "date",
      required: true,
      message: "测定日期不能为空",
      trigger: "change",
    },
  ],
  Earbugles: [{ required: true, message: "羊只耳号不能为空", trigger: "blur" }],
  Height:[{ required: true, message: "身高不能为空", trigger: "blur" }],
  Bust:[{ required: true, message: "胸围不能为空", trigger: "blur" }],
  Scrotum:[{ required: true, message: "阴囊围不能为空", trigger: "blur" }],
  EyeArea:[{ required: true, message: "眼肌面积不能为空", trigger: "blur" }],
  BodyLength:[{ required: true, message: "体长不能为空", trigger: "blur" }],
  TubeGirth:[{ required: true, message: "管围不能为空", trigger: "blur" }],
  Backfat:[{ required: true, message: "背膘厚度不能为空", trigger: "blur" }],
  EyeWidth:[{ required: true, message: "眼肌宽度不能为空", trigger: "blur" }],
});
//修改体尺
const UpdBodyMeasure = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      http.post("first/api/Breeding/UpdBodyMeasure", Isform1).then((res) => {
        if (res.data > 0) {
          ElMessage({
            message: "体尺测定保存成功",
            type: "success",
          });
          dialogFormVisible1.value = false;
          GetBodyMeasure();
        } else {
          ElMessage({
            message: "体尺测定保存失败",
            type: "error",
          });
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
//反填
const EditBodyMeasure = (BMID:any) => {
  dialogFormVisible1.value = true;
  http.get("srout/api/Breeding/EditBodyMeasure?BMID="+BMID)
    .then(res => {  
      Isform1.BMID = res.data.BMID;  
      Isform1.MeasureDate = res.data.MeasureDate;  
      Isform1.Earbugles = res.data.Earbugles;  
      Isform1.Height = res.data.Height;  
      Isform1.Bust = res.data.Bust;  
      Isform1.Scrotum = res.data.Scrotum;  
      Isform1.EyeArea = res.data.EyeArea;  
      Isform1.BodyLength = res.data.BodyLength;  
      Isform1.TubeGirth = res.data.TubeGirth; 
      Isform1.Backfat = res.data.Backfat;  
      Isform1.EyeWidth = res.data.EyeWidth;  
      Isform1.Sex = res.data.Sex;  
      Isform1.Breed = res.data.Breed;  
      Isform1.MeasureCottage = res.data.MeasureCottage;  
      Isform1.AgeDay = res.data.AgeDay;  
      Isform1.CreateBy = res.data.CreateBy;  
      Isform1.CreateDate = res.data.CreateDate;  
  })
}
//选中数据
let ids = "";
const TagBool = ref(true);
const TagCount = ref(0);
const handleSelectionChange = (val: refs | any) => {
    refs.value = val;
    ids = "";
    val.forEach(x => {
        ids += x.BMID + ",";
    })
    ids = ids.substring(0, ids.length - 1);
    TagCount.value = ids.split(',').length;
    if (ids == "") {
        TagCount.value = 0;
    }
    if (TagCount.value == 0) {
        TagBool.value = true;
    }
    else {
        TagBool.value = false;
    }
}
//批量删除
const BatchDel=() => {
  let idss = refs.value.map(x=>x.BMID);
  if (refs.value.length == 0) {
    ElMessage.error("至少选择一项");
    return;
  }
   ElMessageBox.confirm("确定要此数据删除吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http
        .post("first/api/Breeding/BatchBodyMeasure?Array="+idss)
        .then((res) => {
          if (res.data > 0) {
            ElMessage({
              type: "success",
              message: "信息批量删除成功",
            });
            GetBodyMeasure();
          } else {
            ElMessage({
              type: "error",
              message: "信息批量删除失败",
            });
          }
        });
    }) 
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });

}
//单个删除
const Del = (BMID: any) => {
  ElMessageBox.confirm("确定要此数据删除吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http
        .delete("first/api/Breeding/DelBodyMeasure?BMID=" + BMID)
        .then((res) => {
          if (res.data > 0) {
            ElMessage({
              type: "success",
              message: "信息删除成功",
            });
            GetBodyMeasure();
          } else {
            ElMessage({
              type: "error",
              message: "信息删除失败",
            });
          }
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
}
//列表集合
const BodyMeasureList = ref([])
//查询字段
const form = reactive({
  Earbugles: "",
  Breed: "" ,
  Sex: "" ,
})
//体长测定列表显示
const GetBodyMeasure = () => {
  http.get("srout/api/Breeding/GetBodyMeasure", {
    params: {
      pageIndex:page.pageIndex,
      pageSize:page.pageSize,
      Earbugles: form.Earbugles||null,
      Breed: form.Breed || null,
      Sex: form.Sex || null,  
    }                                                               
  }).then(res => {  
    BodyMeasureList.value = res.data.datas;
    page.totalCount = res.data.totalCount;
    page.pageCount = res.data.pageCount;
  })
}
//分页
const page = {
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  pageCount: 0
}
const handleSizeChange = (sel: any) => {
  page.pageSize = sel;
  GetBodyMeasure();
}
const handleCurrentChange = (sel: any) => {
  page.pageIndex = sel;
  GetBodyMeasure();
}
//耳号
const ear=ref()
//耳号下拉框
const earlist=()=>{
  http.get("MYroute/api/SheepFile/SheepFileConditionEard").then(res => {    
    console.log(res.data);
    ear.value=res.data;
  })
}
//品种下拉框
const BreedList = ref([
  {
    value: "",
    name: "",
  },
]);
//性别下拉框
const SexList = ref([
  {
    value: "",
    name: "",
  },
]);
//性别
const GetSex = () => {
  http.get("srout/api/Breeding/GetSex").then((res) => {
    SexList.value = res.data;
  });
};
//品种
const GetBreed = () => {
  http.get("srout/api/Breeding/GetBreed").then((res) => {
    BreedList.value = res.data;
  });
};
// --------------------------------？钩子函数
onMounted(() => {  
  earlist();
  GetSex();
  GetBreed();
  GetBodyMeasure();
})

</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>